<template>
  <!-- 产品管理 -->
  <div>
   <div  v-show="fall"> <p><span>产品管理名称</span>  <el-input v-model="input" class="inp" placeholder="请输入自提点名称" />  <el-button type="primary" :icon="Search">搜索</el-button> <el-button type="info" :icon="Delete">清空</el-button></p></div>
   <div class="searbox">
  <el-button :icon="Refresh"></el-button>
  <el-button  @click="show(fall)" :icon="Search"></el-button> </div> 
  <p> <el-button type="primary" :icon="Plus" @click="dialogFormVisible = true">新增</el-button>
    <el-button type="danger" v-if="seles.length" @click="deletes">批量删除</el-button>
    <el-button type="danger" v-else disabled>批量删除</el-button>
  </p>
  <p class="ps"><span>当前表格已选择{{seles.length}}项</span><button class="clear" @click="clear">清空</button></p>
   <el-dialog v-model="dialogTableVisible" title="Shipping address">
  <el-table :data="list">
    <el-table-column property="date" label="Date" width="150" />
    <el-table-column property="name" label="Name" width="200" />
    <el-table-column property="address" label="Address" />
  </el-table>
</el-dialog>


<!-- 表格 -->
<el-table  ref="multipleTableRef"
  :data="list"
  class="tables"
  style="width: 100%"
  stripe
  @selection-change="handleSelectionChange"
  >
  <el-table-column type="selection" ref="table" width="60" class="selbtn" />
  <el-table-column fixed prop="prodName" label="产品名字" width="180" />
  <el-table-column prop="oriPrice" label="商品原价" width="120" />
  <el-table-column prop="price" label="商品现价" width="120" />
  <el-table-column prop="categoryId" label="商品库存" width="120" />
  <el-table-column prop="area" label="产品图片" width="120" >
    
    <template #default='scope'>
      <div class="imgs">
        <img :src="scope.row.pic" alt="" class="imgs" >
      </div>
    </template>
  </el-table-column>
  <el-table-column prop="status" label="状态" width="120" >
    <template #default="scope">
      <span>{{ scope.row.status ==1?'上架':"未上架"}}</span>
    </template>
  </el-table-column>

  <el-table-column fixed="right" label="操作" width="180">
    <template #default="scope">
      <el-button type="primary" :icon="EditPen">编辑</el-button>
      <el-button type="danger" :icon="DeleteFilled" @click="del(scope.$index)">删除</el-button>
    </template>
  </el-table-column>
</el-table>
  </div>
</template>

<script setup>
import {
Check,
Delete,
Edit,
Message,
EditPen,
Plus,
Search,
Star,
Refresh,
DeleteFilled
} from '@element-plus/icons-vue'
import { ref,reactive, onMounted } from 'vue'
import {product} from '@/api/index'
const input = ref('')
const formLabelWidth = '140px'
//获取接口数据
const list=ref([])
onMounted(async ()=>{
const res=await product()
list.value=res.data.records
console.log(list,'+++++++++++++++++');
})
//已选择的多选框
const seles=ref([])
const handleSelectionChange=(val)=> {
   seles.value=val
    }

    //单个删除
const del=(res)=>{
list.value.splice(res,1)
}
//批量删除
const deletes=()=>{
  list.value.forEach((item,index)=>{
    seles.value.forEach((j,i)=>{
      if(item.shopId===j.shopId){
        seles.value.splice(i,1)
      }
    })
  })
}
//点击显示隐藏
const fall=ref(false)
let show=(item)=>{
fall.value =! fall.value
 
}
</script>

<style scoped>
.inp{
  width: 200px;
}
.ps{
  width: 200px;
  height: 35px;
text-align: center;
line-height: 35px;
color: #02a1e9;
  background: rgba(2,161,233,.1)
}
.clear{
  background: rgba(2,161,233,.1);
  color: #02a1e9;
  border: none;
  margin-left: 15px;
}

.imgs{
  width: 40px;
  height:40px;
}
.el-table__row{
  height: 50px;
}
.searbox{
  margin-left: 80%;
}
</style>